<template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div> -->
      <slot />
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.min.css'

export default {
  name: 'Swiper',

  props: {
    autoplay: {
      type: Number,
      default: 1000
    },
    loop: {
      type: Boolean,
      default: true
    }
  },

  mounted () {
    const that = this

    /* eslint-disable */
    // this.$refs.swiper 还可以使用 this.$el,因为swrper组件的根元素是swiper容器，
    // this.$el就是表示组件根元素的DOM对象
    var mySwiper = new Swiper(this.$refs.swiper, {
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },

      loop: this.loop,

      autoplay: this.autoplay
        ? {
            delay: this.autoplay, 
            stopOnLastSlide: false,
            disableOnInteraction: true
          }
        : false,

      on: {
        slideChangeTransitionEnd: function() {//每一张轮播切换的时候触发
          // 触发一个自定义事件 change
          // this.realIndex => this指向swiper实例，this.realIndex表示每一个轮播图片的下标
          // this.$emit()   => this指向当前组件实例
          that.$emit("change", this.realIndex);
        }
      }
    });
    /* eslint-enable */
  }
}
</script>

<style lang="less">
.swiper-container {
  width: 100%;
  height: 180px;
  background: #eee;
  .swiper-pagination-bullet {
    opacity: 1;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: hsla(0, 0%, 100%, 0.7);
  }
  .swiper-pagination-bullet-active {
    width: 20px;
    height: 10px;
    background: url("../../assets/icon/dot.png") no-repeat;
    background-size: 100%;
  }
}
</style>
